<!-- @format -->

<template>
  <transition name="dialog-fade">
    <div
      v-if="visible"
      class="dialog-confirm-overlay"
      @click.self="handleClose"
    >
      <div class="dialog-confirm-container" :style="{ width: width }">
        <div class="dialog-confirm-header">
          <h3 class="dialog-confirm-title">{{ title }}</h3>
          <div class="dialog-confirm-close" @click="handleClose">
            <el-icon><Close style="width: 24px; font-size: 24px" /></el-icon>
          </div>
        </div>

        <div class="dialog-confirm-content">
          <div class="dialog-confirm-icon" v-if="showIcon">
            <el-icon :class="`dialog-confirm-icon-${type}`">
              <SuccessFilled v-if="type === 'success'" />
              <CircleCloseFilled v-if="type === 'error'" />
              <WarningFilled v-if="type === 'warning'" />
              <WarnTriangleFilled v-if="type === 'info'" />
            </el-icon>
          </div>
          <div class="dialog-confirm-message">
            <p>{{ message }}</p>
            <p class="dialog-confirm-submessage" v-if="subMessage">
              {{ subMessage }}
            </p>
            <slot></slot>
            <!-- 自定义内容插槽 -->
          </div>
        </div>

        <div class="dialog-confirm-footer">
          <button
            v-if="showCancelButton"
            class="dialog-confirm-btn dialog-confirm-btn-confirm"
            @click="handleCancel"
          >
            {{ cancelButtonText }}
          </button>
          <button
            class="dialog-confirm-btn dialog-confirm-btn-cancel"
            @click="handleConfirm"
          >
            {{ confirmButtonText }}
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import {
    SuccessFilled,
    CircleCloseFilled,
    WarningFilled,
    WarnTriangleFilled,
    Close,
  } from '@element-plus/icons-vue';

  interface DialogProps {
    visible?: boolean;
    title?: string;
    width?: string;
    message?: string;
    subMessage?: string;
    showIcon?: boolean;
    type?: 'success' | 'warning' | 'error' | 'info';
    iconClass?: string;
    confirmButtonText?: string;
    cancelButtonText?: string;
    showCancelButton?: boolean;
    onConfirm?: () => void;
    onCancel?: () => void;
  }

  const props = withDefaults(defineProps<DialogProps>(), {
    visible: false,
    title: '确认',
    message: '',
    subMessage: '',
    width: '420px',
    showIcon: true,
    type: 'warning',
    iconClass: 'el-icon-question',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    onConfirm: () => {},
    onCancel: () => {},
  });

  const visible = ref(props.visible);

  const handleConfirm = () => {
    visible.value = false;
    props.onConfirm();
  };

  const handleCancel = () => {
    visible.value = false;
    props.onCancel();
  };

  const handleClose = () => {
    handleCancel();
  };

  onMounted(() => {
    visible.value = true;
  });

  defineExpose({
    visible,
    handleConfirm,
    handleCancel,
    handleClose,
  });
</script>

<style lang="scss" scoped>
  .dialog-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .dialog-confirm-container {
    width: 420px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: dialog-zoom-in 0.3s ease-out;
  }

  .dialog-confirm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
  }

  .dialog-confirm-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .dialog-confirm-close {
    cursor: pointer;
    font-size: 20px;
    color: #999;
    transition: color 0.2s;

    &:hover {
      color: #666;
    }
  }

  .dialog-confirm-content {
    padding: 30px 24px;
    display: flex;
    align-items: flex-start;
  }

  .dialog-confirm-icon {
    margin-right: 20px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  .dialog-confirm-message {
    flex: 1;
    max-height: 400px;
    overflow-y: auto;
    p {
      margin: 0;
      font-size: 16px;
      color: #333;
      line-height: 1.5;
    }

    .dialog-confirm-submessage {
      margin-top: 8px;
      font-size: 14px;
      color: #666;
    }
  }

  .dialog-confirm-footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }

  .dialog-confirm-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    outline: none;

    &-cancel {
      background-color: #f5f5f5;
      color: #666;

      &:hover {
        background-color: #e8e8e8;
      }
    }

    &-confirm {
      background-color: #d1281f;
      color: #fff;

      &:hover {
        background-color: #ec1f14bd;
      }
    }
  }

  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: opacity 0.3s;
  }

  .dialog-fade-enter-from,
  .dialog-fade-leave-to {
    opacity: 0;
  }

  @keyframes dialog-zoom-in {
    from {
      transform: scale(0.9);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @media screen and (max-width: 768px) {
    .dialog-confirm-container {
      width: 90%;
      max-width: 420px;
    }

    .dialog-confirm-content {
      padding: 20px 24px;
    }
  }

  .dialog-confirm-icon-info {
    color: #d1281f; /* 默认使用蓝色，表示询问 */
    width: 60px;
    height: 60px;
  }
  .dialog-confirm-icon-success {
    color: #67c23a; /* 成功图标使用绿色 */
    width: 60px;
    height: 60px;
  }

  .dialog-confirm-icon-warning {
    color: #e6a23c; /* 警告图标使用黄色 */
    width: 60px;
    height: 60px;
  }

  .dialog-confirm-icon-error {
    color: #f56c6c; /* 错误图标使用红色 */
    width: 60px;
    height: 60px;
  }
</style>
